<template>
  <div class="productlist">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="2"
            ><div class="grid-content bg-purple">
              {{ User.username }},欢迎你
            </div></el-col
          >
          <el-col :span="2" :offset="18"
            ><div class="grid-content bg-purple">
              <el-button
                type="primary"
                icon="el-icon-shopping-cart-2"
                @click="pushCart"
                >购物车</el-button
              >
            </div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content bg-purple">
              <el-button
                style="font-size: large; color: black"
                type="text"
                @click="Loginout"
                >退出登录</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px"
          ><Sidebar @update-genre="updateGenre"></Sidebar
        ></el-aside>
        <el-main
          ><div
            class="block"
            v-for="fit in tableData"
            :key="fit"
            @click="prodetail(fit)"
          >
            <el-image
              :src="require(`@/assets/image/p${fit.id}.png`)"
              :fit="fill"
            ></el-image>
            <div class="text">
              <p class="description">{{ fit.description }}</p>
              <p class="price">¥{{ fit.price }}</p>
            </div>
          </div></el-main
        >
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import Sidebar from "@/components/Navbar.vue";

export default {
  components: {
    Sidebar,
  },
  data() {
    return {
      username: "",
      password: "",
      User: JSON.parse(sessionStorage.getItem("User")),
      genre: "",
      tableData: [],
    };
  },
  created() {
    this.genre = "电子产品";
    this.getProductList(this.genre);
  },
  methods: {
    pushCart(){
      this.$router.push("/Cart");
    },
    Loginout() {
      this.$router.push("/home");
    },
    updateGenre(index) {
      this.getProductList(index);
    },
    getProductList(index) {
      this.genre = index;
      const params = new URLSearchParams({ genre: this.genre }).toString();
      axios
        .get(`http://localhost:8080/products/getProductList?${params}`)
        .then((response) => {
          console.log(this.genre, ":", response.data);
          this.tableData = response.data;
        })
        .catch((error) => {
          console.error("请求错误:", error);
        });
    },
    prodetail(fit) {
      // 将对象转换为查询参数的字符串
      const queryParams = encodeURIComponent(JSON.stringify(fit));
      const route = this.$router.resolve({
        name: "ProDetail",
        query: { data: queryParams }, // 使用查询参数传递对象
      });
      window.open(route.href, "_blank");
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  padding: 20px; /* 添加内边距 */
}
.el-container {
  height: 100vh;
}
.block {
  width: 23%; /* 每行两个商品 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  margin-bottom: 20px; /* 每个块之间的间距 */
  margin-right: 20px;
  height: 500px;
}

.block:hover {
  border: 1px solid var(--tbpc-primary-theme-color, #212c9c);
}

.el-image {
  width: 300px;
  height: 300px;
  margin-bottom: 10px; /* 图片和文字之间的间距 */
}

.text {
  width: 300px;
}
.description {
  font-size: x-large;
}
.price {
  color: #ff5000;
  font-size: xx-large;
}
</style>